
<template>
  <div class="send">
    <el-dialog
      title="发送"
      :visible.sync="visible"
      @close="close"
      :showsendDialog="showsendDialog"
      class="sendhead"
    >
      <div>
        <div class="top">
          <!-- <el-checkbox-group v-for="(item,index) in checkList" :key="index">
            <el-checkbox>
               {{item}}
            </el-checkbox>
      
          </el-checkbox-group> -->
          <ul v-for="(item, index) in checkList" :key="index">
            <li>
              <input type="checkbox" name="" id="" :value="item" checked />
              <span class="name">{{ item }}</span>
            </li>
          </ul>
        </div>
        <div class="center" style="text-align: center">
          <textarea
            name=""
            id=""
            cols="100"
            rows="10"
            placeholder="请输入流转意见"
            v-model="opinion"
          ></textarea>
        </div>
        <div class="bottom" style="text-align: center">
          <el-button size="small" @click="close">取 消</el-button>&nbsp;&nbsp;
          <el-button size="small" type="primary" @click="onSubmit"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getNextPerson } from "@/api/ywsp/db.js";
import { agree } from "@/api/ywsp/db.js";

export default {
  props: {
    showsendDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      //多选框的数据
      fullname: "",
      taskid: "",
      checkList: [],
      checkinfoList: [],
      checkarr: [], //v-model绑定的选中的数据
      // aa:['hha','ff','tt','cc'],
      visible: this.showsendDialog,
      opinion: "",
    };
  },
  async created() {
    this.taskid = this.$route.query.id;
    console.log(this.taskid);
    const res = await getNextPerson({
      taskId: this.taskid,
    });
    this.checkinfoList = res.data.result;
    if (this.checkinfoList) {
      this.checkinfoList.forEach((item) => {
        if (Object.values(item)[1] != "") {
          this.checkList.push(Object.values(item)[1]);
        }
      });
    }

    // console.log(res.data.result[0].users);
    //   this.$nextTick;
    // if(res.data.result[0].users){
    //   this.checkList=res.data.result[0].users
    // }
    console.log(this.checkarr);
  },
  watch: {
    showsendDialog() {
      this.visible = this.showsendDialog;
    },
  },
  methods: {
    close() {
      this.$emit("update:showsendDialog", false);
    },
    async onSubmit() {
      const res = await agree(
        JSON.stringify({
          taskId: this.taskid,
          chooseNodeUser: this.checkList,
          opinion: this.opinion,
        })
      )
      console.log(res);
      this.$message({
        message:"提交成功!",
        type:'success'
      })
      this.close();
    },
     
  },
};
</script>

<style lang="scss" scoped>
.send {
  /deep/ .sendhead .el-dialog .el-dialog__header {
    height: 42px;
    background: #f4f6f8 !important;
  }
  /deep/.el-dialog__title {
    font-size: 14px;
    color: black;
    font-weight: bold;
  }
  .center {
    margin-top: 100px;

    textarea {
      border-radius: 4px;
      border: 1px solid #dfe2eb;
      resize: none;
      outline: none;
      text-indent: 1em;
      ::placeholder {
        color: #dfe2eb !important;
      }
    }
  }
  .top {
    margin-left: 130px;
    height: 30px;
    ul {
      margin-left: -30px;
      li {
        float: left;
        margin: 20px;
        span {
          margin-left: 5px;
        }
      }
    }
  }
  .bottom {
    margin-top: 30px;
  }
}
</style>